<template>
  <!-- 
    1:定义接口api
    2:导入
    3：调用存储数据并渲染
 -->
  <!-- 位置处理
 1：滚动过程中记录滚动条位置
 2：当该组件激活时（显示时），让滚动条回到前面记录的位置
  -->
  <div class="article-list" @scroll="scrollEvent" ref="articleList">
    <!-- 上拉加载
           list
              v-model是否处于加载中
              finished:是否加载完成
              finished-text:加载完成后的文本显示
              @load="加载"
                  加载完成
                     1：v-model的值变成false
                     2:数据要累加
                     3：下一次上拉加载请求条件的修改
                     4：判断是否加载完成
                        如果完成，finished=true  -->

    <!-- van-pull-refresh
          v-model:是否处于刷新中，默认false,下拉 时会自动变成true
          @refresh="刷新方法：1：v-model的值变成false  2:相应的值要初始化"
 -->
    <van-pull-refresh v-model="refreshLoading" @refresh="refresh">
      <van-list
        v-if="bol"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <!-- 文章列表点击事件
           1：创建文章详情所对应组件
           2：配制路由
           3：点击跳转并路由传参
              路由传参
                 a:通过path
                   this.$router.push('/path?参数名=值')
                 b:动态路由匹配(配制路由)
                   {
                    path:'/path/:id'
                   }
                   this.$router.push('/path/123')
                 c:name传参
                    {
                    path:'/path',
                    name:'path'
                   }
                   this.$router.push({
                    name:'path',
                    query:{
                      id:123
                    },
                    params:{
                      id:123
                      // 它的值的存储在内存中，刷新数据就没了
                    }
                   })
       -->
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="$router.push('/article/' + item.art_id)"
        >
          <h3 class="title">{{ item.title }}</h3>
          <div class="img">
            <!-- 
        1:100%   1/1*100+"%"
        2:50%    1/2*100+"%"
        3:33.3%  1/3*100+"%" -->
            <img
              v-for="(i, index2) in item.cover.images"
              :key="index2"
              :style="{ width: (1 / item.cover.images.length) * 100 + '%' }"
              :src="i"
              alt=""
            />
          </div>
          <div class="other">
            <span class="name">{{ item.aut_name }}</span>
            <span class="comment">{{ item.comm_count }}评论</span>
            <!-- 
           过滤器转换时间
             全局过滤器
               Vue.filter(过滤器方法名,(形参)=>{
                return 值
               })  -->
            <span class="time">{{ item.pubdate | formatDate }}</span>
            <van-icon name="cross" />
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { articles } from '@/api/home'
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      bol: true,
      refreshLoading: false,
      loading: false,
      finished: false,
      list: [],
      timestamp: Date.now(),
      scrollTop: 0
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    refresh () {
      this.refreshLoading = false
      this.loading = false
      this.finished = false
      this.list = []
      this.timestamp = Date.now()
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    async getData () {
      const res = await articles({
        channel_id: this.id,
        timestamp: this.timestamp
      })
      // 1：v-model的值变成false
      this.loading = false
      //  2:数据要累加
      this.list.push(...res.data.data.results)
      //  3：下一次上拉加载请求条件的修改
      this.timestamp = res.data.data.pre_timestamp
      //  4：判断是否加载完成  如果完成，finished=true
      if (!this.timestamp) {
        this.finished = true
      }

      // console.log('文章列表', res)
    },
    async load () {
      await this.getData()
    },
    // 滚动过程中记录滚动条位置
    scrollEvent (e) {
      this.scrollTop = e.target.scrollTop
      // console.log(e.target.scrollTop)
    }
  },
  activated () {
    this.$refs.articleList.scrollTop = this.scrollTop
  }
}
</script>
<style lang="less" scoped>
.article-list {
  position: fixed;
  top: 90px;
  bottom: 50px;
  overflow-y: auto;
  .item {
    padding: 15px;
    width: 100vw;
    box-sizing: border-box;
    .title {
      padding-bottom: 5px;
    }
    .img {
      display: flex;
      img {
        flex: 1;
        padding: 0 5px;
        box-sizing: border-box;
      }
    }
    .other {
      color: #ccc;
      display: flex;
      padding-top: 10px;
      .time {
        flex: 1;
      }
      .comment {
        padding: 0 10px;
      }
    }
  }
}
</style>
